<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <title>资产统计</title>
    <link rel="stylesheet" href="../../css/reset.css" />
    <style>
        body {
            width: 100%;
            background-color: #ffffff;
            font-size: 0.28rem;
            height: auto;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            font-family: PingFangSC-Regular, sans-serif;
            color: #333333;
            padding: 0 0.3rem;
            box-sizing: border-box;
        }

        header {
            width: 100%;
            height: 0.6rem;
            border: 1px solid #EEEEEE;
            display: flex;
            display: -webkit-flex;
            align-items: stretch;
            margin-top: 0.36rem;
        }

        header p {
            width: 33.3%;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.24rem;
            color: #8C8C8C;
            font-weight: 600;
        }

        header p:not(:last-of-type) {
            border-right: 1px solid #EEEEEE;
        }

        header p.active {
            color: #262626;
            background: #F8DD6C;
        }

        .outCantain {
            width: 100%;
            height: auto;
            margin-top: 0.2rem;
            position: relative;
        }

        /* 产出冻结 */
        .listbody {
            width: 100%;
            height: auto;
            min-height: 8rem;
            box-sizing: border-box;
            background-color: #fff;
            padding-bottom: 0.8rem;
        }

        .ipfsList {
            width: 100%;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
        }

        .ipfsList>li {
            width: 100%;
            height: auto;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-bottom: 0.2rem;
            background-color: #F9F9F9;
        }

        .liitemup {
            width: 100%;
            height: 1.34rem;
            display: flex;
            display: -webkit-flex;
            align-items: stretch;
            justify-content: space-between;
        }

        .liitemup li {
            width: 33.3%;
            height: 1.34rem;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .liitemup li:not(:nth-of-type(2)) {
            padding-left: 0.2rem;
            box-sizing: border-box;
        }

        .liitemup li:first-child {
            align-items: flex-start;
        }

        .liitemup li span {
            font-size: 0.2rem;
            color: #999999;
        }

        .liitemup li span:last-of-type {
            color: #595959;
            margin-top: 0.1rem;
        }

        .liitemdown {
            width: 100%;
            height: auto;
            display: flex;
            display: -webkit-flex;
            align-items: stretch;
            justify-content: space-between;
        }

        .liitemdown li {
            width: 25%;
            min-height: 1.02rem;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            align-items: stretch;
            justify-content: center;
        }

        .liitemdown li:not(:nth-of-type(3)) {
            padding-left: 0.2rem;
            box-sizing: border-box;
        }

        .liitemdown li:last-of-type {
            display: flex;
            display: -webkit-flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
        }

        .liitemdown li span {
            font-size: 0.2rem;
            color: #999999;
        }

        .liitemdown li span:last-of-type {
            color: #595959;
            margin-top: 0.1rem;
        }

        /* 质押冻结 */
        .pledgeFreeze {
            width: 100%;
            height: auto;
            min-height: 8rem;
        }

        #pedgeTable {
            width: 100%;
            font-size: 0.22rem;
            font-family: PingFang SC;
            font-weight: 500;
            color: #999999;
        }

        #pedgeTable tr {
            height: 0.6rem;
        }

        #pedgeTable tbody tr {
            font-size: 0.2rem;
            font-weight: 500;
            color: #595959;
        }

        /* 其他冻结 */
        .otherFreeze {
            width: 100%;
            height: auto;
            min-height: 8rem;
        }

        #otherTable {
            width: 100%;
            font-size: 0.22rem;
            font-family: PingFang SC;
            font-weight: 500;
            color: #999999;
        }

        #otherTable tr {
            width: 100%;
            height: 0.6rem;
        }

        #otherTable tbody tr {
            height: 0.6rem;
        }

        #otherTable tr td {
            vertical-align: middle;
        }

        #otherTable td {
            width: 20%;
        }

        #otherTable tbody tr {
            width: 100%;
            font-size: 0.2rem;
            font-weight: 500;
            color: #595959;
            vertical-align: middle;
        }

        #otherTable thead tr td:not(:first-of-type) {
            text-align: center;
        }

        #otherTable tbody tr td:not(:first-of-type) {
            text-align: center;
        }

        .toBtm {
            width: 1.8rem;
            text-align: center;
            padding: .3rem 0;
            font-size: 0.22rem;
            color: #a4a4a4;
            margin-left: calc((100% - 1.8rem) / 2);
        }

        .loadMore {
            width: 1.8rem;
            text-align: center;
            margin-left: calc((100% - 1.8rem) / 2);
        }

        .loadMore>span {
            height: 0.48rem;
            padding: 0 0.3rem;
            color: #5A5E65;
            font-size: 0.22rem;
            display: inline-block;
            line-height: 0.48rem;
            border: 0.01rem solid#DCDCDC;
        }
    </style>
</head>

<body>
    <header>
        <p class="active" data-name="loadPage">
            产出冻结
        </p>
        <p data-name="pledgeFreeze">
            质押冻结
        </p>
        <p data-name="otherFreeze">
            其他冻结
        </p>
    </header>
    <div class="outCantain">
        <div class="listbody loadPage">
            <ul class="ipfsList">
                <li>
                    <!-- <ul class="liitemup">
                        <li>
                            <span>
                                冻结日期
                            </span>
                            <span>
                                2019/02/05
                            </span>
                        </li>
                        <li>
                            <span>
                                冻结总量
                            </span>
                            <span>
                                --
                            </span>
                        </li>
                        <li>
                            <span>
                                已解冻(4/180)
                            </span>
                            <span>
                                --
                            </span>
                        </li>
                    </ul>
                    <ul class="liitemdown">
                        <li>
                            <span>
                                冻结中
                            </span>
                            <span>
                                0
                            </span>
                        </li>
                        <li>
                            <span>
                                状态
                            </span>
                            <span>
                                已解冻
                            </span>
                        </li>
                        <li>
                            <span>
                                释放周期
                            </span>
                            <span>
                                --
                            </span>
                        </li>
                        <li>
                            <span>
                                备注
                            </span>
                            <span>
                                战队活动
                            </span>
                        </li>
                    </ul> -->
                </li>
            </ul>
        </div>
        <div class="pledgeFreeze" style="display: none;">
            <table id="pedgeTable">
                <thead>
                    <tr>
                        <td>
                            冻结日期
                        </td>
                        <td>
                            冻结总量
                        </td>
                        <td>
                            解冻日期
                        </td>
                        <td>
                            状态
                        </td>
                    </tr>
                </thead>
                <tbody class="pledgeCantina">
                    <!-- <tr>
                        <td>
                            2021-04-20
                        </td>
                        <td>
                            7.21548975
                        </td>
                        <td>
                            2021-04-20
                        </td>
                        <td>
                            已解冻
                        </td>
                    </tr> -->
                </tbody>
            </table>
        </div>
        <div class="otherFreeze" style="display: none;">
            <table id="otherTable">
                <thead>
                    <tr>
                        <td>
                            冻结日期
                        </td>
                        <td>
                            冻结总量
                        </td>
                        <td>
                            解冻日期
                        </td>
                        <td>
                            状态
                        </td>
                        <td>
                            备注
                        </td>
                    </tr>
                </thead>
                <tbody class="otherCantina">
                    <!-- <tr>
                        <td>
                            2021-04-20
                        </td>
                        <td>
                            7.21548975
                        </td>
                        <td>
                            2021-04-20
                        </td>
                        <td>
                            已解冻
                        </td>
                        <td>
                            去你妹的
                        </td>
                    </tr> -->
                </tbody>
            </table>
        </div>
        <p class="toBtm" style="display: none;">到底了</p>
        <p class="loadMore" style="display: none;">
            <span class="moreBtn">加载更多</span>
        </p>
    </div>
</body>
<script src="../../script/autosize.js"></script>
<script src="../../script/fastclick.js"></script>
<script src="../../script/jquery_three_two_one.js"></script>
<script src="../../script/dotmin.js"></script>
<script src="../../script/app.js"></script>
<script>
    apiready = function () {
        var app = new APP();
        var curPage = 1, /*当前页*/
            account = app.getAccount(),
            totalPage = 1,/*总页数*/
            pageSize = 10,/*每页加载数量*/
            pageName = "loadPage";//加载页面名称
        //产出冻结
        function loadPage(account, curPage, isdown) {
            app.ajaxPro({
                url: "member/get-freeze-info",
                values: {
                    token: account.token,
                    currencyCode: "FIL",
                    type: "",
                    page: curPage,
                    pageSize: 20,
                    pledge: 1
                },
                openFlower: true
            }, function (ret) {
                if (ret.code == 200) {
                    totalPage = ret.data.totalPage;
                    if (totalPage > 1) {
                        $(".loadMore").show();
                    }
                    if (curPage > totalPage) {
                        $(".loadMore").hide();
                    }
                    ret.data.list.map(function (item) {
                        item.startDate = item.startDate ? item.startDate : item.ext;
                        item.unfreezeNum = item.unfreezeNum || "--";
                        if ((item.type == 3 && item.unfreezeDays == 0) || item.type == 1) {
                            item.unfreezeDays = "--";
                        } else {
                            item.unfreezeDays = item.unfreezeDays + "天";
                        }
                    })
                    var temp = doT.template($("#mdlist").text());
                    if (isdown) {
                        $(".ipfsList").html(temp(ret.data.list));
                    } else {
                        $(".ipfsList").append(temp(ret.data.list));
                    }
                    if (ret.data.list.length == 0 || ret.data.list.length < 20) {
                        if (curPage == 1 && ret.data.list.length == 0) {
                            $(".toBtm").show().text("暂无数据");
                        } else {
                            $(".toBtm").show().text("暂无更多的数据了");
                        }
                    }
                } else {
                    app.toast(ret.message);
                }
            })
        }
        loadPage(account, curPage, true);
        //质押冻结
        function pledgeFreeze(account, curPage, isdown) {
            app.ajaxPro({
                url: "member/get-freeze-info",
                values: {
                    token: account.token,
                    currencyCode: "FIL",
                    type: "",
                    page: curPage,
                    pageSize: 20,
                    pledge: 2
                },
                openFlower: true
            }, function (ret) {
                if (ret.code == 200) {
                    totalPage = ret.data.totalPage;
                    if (totalPage > 1) {
                        $(".loadMore").show();
                    }
                    if (curPage > totalPage) {
                        $(".loadMore").hide();
                    }
                    ret.data.list.map(function (item) {
                        item.startDate = item.startDate ? item.startDate : item.ext;
                        item.unfreezeNum = item.unfreezeNum || "--";
                        if ((item.type == 3 && item.unfreezeDays == 0) || item.type == 1) {
                            item.unfreezeDays = "--";
                        } else {
                            item.unfreezeDays = item.unfreezeDays + "天";
                        }
                    })
                    var temp = doT.template($("#pledgeFreeze").text());
                    if (isdown) {
                        $(".pledgeCantina").html(temp(ret.data.list));
                    } else {
                        $(".pledgeCantina").append(temp(ret.data.list));
                    }
                    if (ret.data.list.length == 0 || ret.data.list.length < 20) {
                        if (curPage == 1 && ret.data.list.length == 0) {
                            $(".toBtm").show().text("暂无数据");
                        } else {
                            $(".toBtm").show().text("暂无更多的数据了");
                        }
                    }
                } else {
                    app.toast(ret.message);
                }
            })
        }
        //其他冻结
        function otherFreeze(account, curPage, isdown) {
            app.ajaxPro({
                url: "member/get-freeze-info",
                values: {
                    token: account.token,
                    currencyCode: "FIL",
                    type: "",
                    page: curPage,
                    pageSize: 20,
                    pledge: 3
                },
                openFlower: true
            }, function (ret) {
                if (ret.code == 200) {
                    totalPage = ret.data.totalPage;
                    if (totalPage > 1) {
                        $(".loadMore").show();
                    }
                    if (curPage > totalPage) {
                        $(".loadMore").hide();
                    }
                    ret.data.list.map(function (item) {
                        item.startDate = item.startDate ? item.startDate : item.ext;
                        item.unfreezeNum = item.unfreezeNum || "--";
                        if ((item.type == 3 && item.unfreezeDays == 0) || item.type == 1) {
                            item.unfreezeDays = "--";
                        } else {
                            item.unfreezeDays = item.unfreezeDays + "天";
                        }
                    })
                    var temp = doT.template($("#otherFreeze").text());
                    if (isdown) {
                        $(".otherCantina").html(temp(ret.data.list));
                    } else {
                        $(".otherCantina").append(temp(ret.data.list));
                    }
                    if (ret.data.list.length == 0 || ret.data.list.length < 20) {
                        if (curPage == 1 && ret.data.list.length == 0) {
                            $(".toBtm").show().text("暂无数据");
                        } else {
                            $(".toBtm").show().text("暂无更多的数据了");
                        }
                    }
                } else {
                    app.toast(ret.message);
                }
            })
        }
        $("header p").click(function (params) {
            curPage = 1, totalPage = 1;
            $(this).addClass("active").siblings().removeClass("active");
            $(".outCantain>div").hide();
            $(".ipfsList,.pledgeCantina,.otherCantina").empty();
            pageName = $(this).data("name");
            $("." + pageName).show();
            if (pageName == "loadPage") {
                loadPage(account, curPage, true);
                return
            }
            if (pageName == "pledgeFreeze") {
                pledgeFreeze(account, curPage, true);
                return
            }
            otherFreeze(account, curPage, true);
        })

        //点击加载更多
        $(".moreBtn").click(function () {
            if (curPage <= totalPage) {
                curPage++;
                if (pageName == "loadPage") {
                    loadPage(account, curPage, false);
                    return
                }
                if (pageName == "pledgeFreeze") {
                    pledgeFreeze(account, curPage, false);
                    return
                }
                otherFreeze(account, curPage, false);
            }
        });
        app.headerMap();
    }
</script>
<!-- 产出冻结 -->
<script type="text/html" id="mdlist">
    {{~it:it:index}}
    <li>
        <ul class="liitemup">
            <li>
                <span>
                    冻结日期
                </span>
                <span>
                    {{=it.keepAccountsDate}}
                </span>
            </li>
            <li>
                <span>
                    冻结总量
                </span>
                <span>
                    {{=it.num}}
                </span>
            </li>
            <li>
                <span>
                    已解冻({{=it.thawingTimes}}/{{=it.unfreezeDays}})
                </span>
                <span>
                    {{=it.unfreezeNum}}
                </span>
            </li>
        </ul>
        <ul class="liitemdown">
            <li>
                <span>
                    冻结中
                </span>
                <span>
                    {{=it.freezeNum}}
                </span>
            </li>
            <li>
                <span>
                    状态
                </span>
                <span>
                    {{?it.status==1}}
                        冻结 
                    {{??it.status==2}}
                        解冻中
                    {{??}}
                        解冻完
                    {{?}}
                </span>
            </li>
            <li>
                <span>
                    释放周期
                </span>
                <span>
                    {{=it.unfreezeDays}}
                </span>
            </li>
            <li>
                <span>
                    备注
                </span>
                <span>
                    {{=it.remark}}
                </span>
            </li>
        </ul>
    </li>
    {{~}}
</script>
<!-- 质押冻结 -->
<script type="text/html" id="pledgeFreeze">
    {{~it:it:index}}
    <tr>
        <td>
            {{=it.keepAccountsDate}}
        </td>
        <td>
            {{=it.num}}
        </td>
        <td>
            {{=it.startDate}}
        </td>
        <td>
            {{?it.status==1}}
                冻结 
            {{??it.status==2}}
                质押中
            {{??}}
                解冻完
            {{?}}
        </td>
    </tr>
    {{~}}
</script>
<!-- 其他冻结 -->
<script type="text/html" id="otherFreeze">
    {{~it:it:index}}
    <tr>
        <td>
            {{=it.keepAccountsDate}}
        </td>
        <td>
            {{=it.num}}
        </td>
        <td>
            {{=it.startDate}}
        </td>
        <td>
            {{?it.status==1}}
                冻结 
            {{??it.status==2}}
                解冻中
            {{??}}
                解冻完
            {{?}}
        </td>
        <td>
            {{=it.remark}}
        </td>
    </tr>
    {{~}}
</script>

</html>